<template>
  <div class="height-index" >
    <div class="swiper-container swiper-container2" @click="showT($event)">
      <div class="swiper-wrapper">
        <div class="swiper-slide recommend" v-for="(recommend, index) in recom" :key="index">
          <a :href="url+'/goods_'+recommend.id+'.htm'">
            <div class="recommend-info">
              <img :src="url+recommend.img">
              <div class="wine-info">
                <h1>{{recommend.name | filterNull}}</h1>
                <p>产地：{{recommend.chanqu | filterNull}}</p>
                <p>等级：{{recommend.grade | filterNull}}</p>
                <p>酒庄出厂价：<span v-if="hasHeader">{{recommend.o_price | filterNull}}</span><a v-else href="http://www.finewest.cn/user/login.htm">登录可见</a></p>
                <p>国内现货价：<span v-if="hasHeader">{{recommend.price | filterNull}}</span><a v-else href="http://www.finewest.cn/user/login.htm">登录可见</a></p>
              </div>
            </div>
          </a>
          <p class="spot little-spot"><span>亮点：</span>{{recommend.liangdian | filterNull}}</p>
          <img class="more-spot" :src="more" width="24" height="24">
        </div>
      </div>
      <div class="swiper-button-next"><img class="next-btn" src="../assets/img/jump.png" width="37" height="37"></div>
    </div>
  </div>
</template>

<script>
  import more from '../assets/img/more-information.png'
  import nomore from '../assets/img/nomore-information.png'
  export default {
    name: 'recommend',
    props: ['recom', 'Swiper', 'hasHeader'],
    data () {
      return {
        more: more,
        nomore: nomore,
        spotLight: false,
        url: 'http://www.finewest.cn'
      }
    },
    updated () {
      var swiper = new Swiper('.swiper-container2', {
        nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        onlyExternal: true,
        simulateTouch: false,
        loop: true,
        onTouchEnd: function () {
          swiper.startAutoplay()
        }
      })
    },
    methods: {
      showT (event) {
        event = event || window.event
        var target = event.target || event.srcElement
        if (target.nodeName.toLowerCase() === 'img' && target.classList.contains('more-spot')) {
          target.parentNode.getElementsByClassName('spot')[0].classList.toggle('little-spot')
          this.spotLight = !this.spotLight
          if (this.spotLight) {
            target.setAttribute('src', nomore)
          } else {
            target.setAttribute('src', more)
          }
        }
        if (target.nodeName.toLowerCase() === 'img' && target.classList.contains('next-btn')) {
          for (var i = 0; i < document.getElementsByClassName('spot').length; i++) {
            document.getElementsByClassName('spot')[i].classList.add('little-spot')
            document.getElementsByClassName('more-spot')[i].setAttribute('src', more)
          }
        }
      }
    },
    filters: {
      filterNull: function (index) {
        return !index ? '' : index
      }
    }
  }
</script>
<style scoped lang="scss">
  $fonts-color: #555555;
  .height-index{
    position: relative;
    z-index: 0;
    background-color: #ffffff;
    margin-bottom: 4px;
    .swiper-container{
      overflow: visible;
    }
  }
  .recommend-info{
    overflow: hidden;
    img{
      width: 120px;
      height: 120px;
      float: left;
      margin: 11px 36px 10px 15px;
    }
    .wine-info{
      float: left;
      margin: 31px 28px 0 0;
      font-size: 12px;
      width: calc(100% - 200px);
      h1{
        color: #000000;
        line-height: 18px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      p{
        color: $fonts-color;
        line-height: 16px;
        a{
          color: #000000;
          display: inline;
        }
        span{
          color: $fonts-color;
        }
      }
    }
  }
  p.spot{
    font-size: 12px;
    color: $fonts-color;
    margin: 0 12px;
    span{
      color: #000000;
    }
  }
  p.little-spot.spot{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  img.more-spot{
    display: table;
    margin: 0 auto;
  }
  $width: 32%;
  @media screen and (max-width: 414px) {
    .recommend-info{
      img{
        width: 32%;
        margin-right: 20px;
        max-width: 120px;
        max-height: 120px;
      }
      .wine-info{
        width: calc(68% - 80px);
      }
    }
  }
  @media screen and (max-width: 360px){
    .recommend-info{
      .wine-info{
        margin-top: 21px;
      }
    }
  }
  @media screen and (max-width: 320px){
    .recommend-info{
      .wine-info{
        margin-top: 11px;
      }
    }
  }
   .swiper-container.swiper-container2 .swiper-button-next{
     background: none;
     width: 37px;
     height: 37px;
     position: absolute;
     top: -41px;
     right: 0;
     margin-top: 0;
     &:active{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-tap-highlight-color: transparent;
        outline:none;
        background: none;
        text-decoration: none;
      }
  }
</style>
